<template>
  <div class="params">
    <mianbaoxie />
    <el-card class="box-card">
      <el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" show-icon :closable="false"></el-alert>
      <div class="top">
        选择商品分类:
        <el-cascader @change="inityemian" v-model="text" :options="initlist" :props="{ expandTrigger: 'hove',value :'cat_id',label:'cat_name'}"></el-cascader>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="动态参数" name="many">
          <el-button :disabled="disabled" type="primary" size="mini" @click="dialogVisible=true">添加参数</el-button>
          <el-table :data="tablelist" style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-tag
                  :key="i"
                  v-for="(tag,i) in scope.row.attr_vals.split(',').filter(el=>el)"
                  closable
                  :disable-transitions="false"
                  @close="handleClose3(scope.row,scope.row.attr_vals.split(',').filter(el=>el),i)"
                >{{tag}}</el-tag>
                <el-input
                  style="margin-bottom:10px"
                  class="input-new-tag"
                  v-if="scope.row.inputVisible"
                  v-model="scope.row.inputValue"
                  ref="saveTagInput"
                  size="small"
                  @blur="handleInputConfirm(scope.row)"
                ></el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
              </template>
            </el-table-column>
            <el-table-column label="#" prop="id" type="index"></el-table-column>
            <el-table-column label="参数名称" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="mini" @click="bianji(scope.row)">编辑</el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteel(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="only">
          <el-button :disabled="disabled" type="primary" size="mini" @click="dialogVisible=true">添加属性</el-button>
          <el-table :data="tablelist" style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-tag
                  :key="tag"
                  v-for="tag in scope.row.attr_vals.split(',').filter(el=>el)"
                  closable
                  :disable-transitions="false"
                  @close="handleClose3(scope.row,scope.row.attr_vals.split(',').filter(el=>el),i)"
                >{{tag}}</el-tag>
                <el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue" ref="saveTagInput" size="small" @blur="handleInputConfirm(scope.row)"></el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
              </template>
            </el-table-column>
            <el-table-column label="#" prop="id" type="index"></el-table-column>
            <el-table-column label="参数名称" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="mini" @click="bianji(scope.row)">编辑</el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteel(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <!-- 添加 -->
      <el-dialog :title="tantitle?'添加动态参数':'添加静态属性'" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
        <span>
          <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
            <el-form-item :label="tantitle?'动态参数':'静态属性'" prop="username" :rules="[
      { required: true, message: '此选项不能为空'},
    ]">
              <el-input type="age" v-model.number="numberValidateForm.username" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add('numberValidateForm')">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改 -->
      <el-dialog :title="tantitle?'修改动态参数':'修改静态属性'" :visible.sync="dialogVisible2" width="50%" :before-close="handleClose2">
        <span>
          <el-form :model="numberValidateForm2" ref="numberValidateForm2" label-width="100px" class="demo-ruleForm">
            <el-form-item :label="tantitle?'动态参数':'静态属性'" prop="username" :rules="[
      { required: true, message: '此选项不能为空'},
    ]">
              <el-input type="age" v-model.number="numberValidateForm2.username.attr_name" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="updata('numberValidateForm2')">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  initcategories,
  initparams,
  additem,
  deleteitem,
  huitian,
  updataitem,
  addtag,
} from "../ulits/api/params";
import mianbaoxie from "../components/mianbaoxie.vue";
export default {
  components: { mianbaoxie },
  name: "params",
  data() {
    return {
      // 获取下拉框的值
      text: [],
      // 初始下拉框
      initlist: [],
      // 区分静动
      activeName: "many",
      // table  内容
      tablelist: [],
      // button的禁用
      disabled: true,
      // 区别  静态  动态
      tantitle: true,
      // 添加遮罩
      dialogVisible: false,
      // 添加from
      numberValidateForm: {
        username: "",
      },
      // 修改
      dialogVisible2: false,
      // 修改from数据回填
      numberValidateForm2: {
        username: "",
      },
      // tag标签
      dynamicTags: [],
      // 显示隐藏
      inputVisible: false,
      // tag的input的值
      inputValue: "",
    };
  },
  methods: {
    // 切换动态   静态
    handleClick() {
      this.inityemian();
      this.tantitle = this.activeName == "many" ? true : false;
    },
    // 添加
    add(formName) {
      if (this.text.length < 3) {
        return;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          additem({
            id: this.text[this.text.length - 1],
            attr_name: this.numberValidateForm.username,
            attr_sel: this.activeName,
          }).then((res) => {
            this.Message(res);
            this.initparams();
          });
        } else {
          return false;
        }
        this.dialogVisible = false;
        this.numberValidateForm.username = "";
      });
    },
    // 关闭添加框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 删除
    deleteel(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteitem({
            id: this.initlist[this.initlist.length - 1].cat_id,
            attrid: row.attr_id,
          }).then((res) => {
            this.Message(res);
            this.initparams();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 关闭修改弹框
    handleClose2(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 编辑回填
    bianji(row) {
      huitian({
        id: this.text[this.text.length - 1],
        attrid: row.attr_id,
        attr_sel: this.activeName,
      }).then((res) => {
        this.numberValidateForm2.username = res.data;
      });
      this.dialogVisible2 = true;
    },
    // 确认编辑
    updata() {
      updataitem({
        id: this.text[this.text.length - 1],
        attrid: this.numberValidateForm2.username.attr_id,
        attr_sel: this.activeName,
        attr_name: this.numberValidateForm2.username.attr_name,
      }).then((res) => {
        this.Message(res);
        this.initparams();
      });
      this.dialogVisible2 = false;
    },
    // 初始数据table框
    inityemian() {
      if (this.text.length < 3) {
        return;
      }
      initparams({
        id: this.text[this.text.length - 1],
        attr_sel: this.activeName,
      }).then((res) => {
        res.data.forEach((el) => {
          el.inputVisible = false;
          el.inputValue = "";
        });
        this.tablelist = res.data;
        this.Message(res);
        this.disabled = false;
      });
    },
    // 删除tag标签
    handleClose3(row, tag, i) {
      tag.splice(i, 1);
      addtag({
        id: this.text[this.text.length - 1],
        attrid: row.attr_id,
        attr_sel: this.activeName,
        attr_vals: tag.join(","),
        attr_name: row.attr_name,
      }).then((res) => {
        row.attr_vals = res.data.attr_vals;
      });
    },
    // 切换到添加tag标签
    showInput(row) {
      row.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    // 确认添加tag标签
    handleInputConfirm(row) {
      this.dynamicTags = [row.attr_vals];
      let inputValue = row.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      row.inputVisible = false;
      row.inputValue = "";
      addtag({
        id: this.text[this.text.length - 1],
        attrid: row.attr_id,
        attr_sel: this.activeName,
        attr_vals: this.dynamicTags.join(","),
        attr_name: row.attr_name,
      }).then((res) => {
        row.attr_vals = res.data.attr_vals;
      });
    },
    // 消息提示
    Message(res) {
      if (res.meta.status >= 200 && res.meta.status < 300) {
        this.$message({
          message: res.meta.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: res.meta.msg,
          type: "error",
        });
      }
    },
    // 更新页面
    initparams() {
      initparams({
        id: this.text[this.text.length - 1],
        attr_sel: this.activeName,
      }).then((res) => {
        this.tablelist = res.data;
      });
    },
  },
  created() {
    // 初始下拉狂数据
    initcategories().then((res) => {
      this.initlist = res.data;
    });
  },
};
</script>

<style lang="scss" scoped>
.params .el-tag + .el-tag[data-v-7af205c0] {
  margin-bottom: 10px;
}

.params {
  .top {
    margin: 15px 0;
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 100%;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}
</style>